<template>
    <div id="home">
		<header class="mui-bar mui-bar-nav public-green-bgcolor header-no-shadow header-txt-color msg-nav">
			<h1 class="mui-title">聊天</h1>
		</header>
		
		<div class="mui-content msg-content">
			<!--横向导航条-->
			<div id="msg-scroll-box">
				<div class="mui-control-item">
					<span class="msg-span active">
						<span>消息</span>
						<span class="msg-tip active"></span>
					</span>
				</div>
				<div class="mui-control-item">
					<span class="msg-span">
						<span>新的朋友</span>
						<span class="msg-tip active"></span>
					</span>
				</div>
				<div class="mui-control-item">
					<span class="msg-span">群聊</span>
				</div>
				<div class="mui-control-item">
					<span class="msg-span">通讯录</span>
				</div>
				<div class="mui-control-item">
					<span class="msg-span">
						<span>机器人</span>
						<span class="msg-tip active"></span>
					</span>
				</div>
			</div>
			
			<!--消息列表-->
			<div class="home-div-user mui-scroll-wrapper news active" id="news">
				<div class="user-lists mui-scroll">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-media">
							<img class="mui-media-object mui-pull-left" src="http://192.168.6.17:8082/images/girls1.jpg">
							<div class="mui-media-body">
								<p>
									<span class="nickname">爱偷吃的鱼</span>
									<span class="mui-pull-right">
										<span>10:21</span>
									</span>
								</p>
								<div class="message-tip">
									<p class="mui-ellipsis">
										我挑选了你作为约会对象答案大所大所大所大大大所多所大所大所大所多
										挑选了你作为约会对象答案大所挑选了你作为约会对象答案大所
									</p>
									<span class="mui-badge mui-badge-success mui-pull-right">1</span>
								</div>
							</div>
						</li>
						<li class="mui-table-view-cell mui-media">
							<img class="mui-media-object mui-pull-left" src="http://192.168.6.17:8082/images/girls2.jpg">
							<div class="mui-media-body">
								<p>
									<span class="nickname">我有些缺点</span>
									<span class="mui-pull-right">
										<span>11:23</span>
									</span>
								</p>
								<div class="message-tip">
									<p class="mui-ellipsis">我挑选了你作为约会对象</p>
									<span class="mui-badge mui-badge-success mui-pull-right">1</span>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
			
			
			<!--朋友列表-->
			<div class="home-div-user mui-scroll-wrapper friends" id="friends">
				<div class="user-lists mui-scroll">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-media">
							<img class="mui-media-object mui-pull-left" src="http://192.168.6.17:8082/images/girls2.jpg">
							<div class="mui-media-body">
								<p class="agree">
									<span class="nickname">我有些缺点</span>
									<span class="mui-pull-right">
										<button class="mui-btn-link agree">同意</button>
									</span>
								</p>
								<div class="message-tip">
									<p class="mui-ellipsis">小龙</p>
								</div>
							</div>
						</li>
						<li class="mui-table-view-cell mui-media">
							<img class="mui-media-object mui-pull-left" src="http://192.168.6.17:8082/images/girls1.jpg">
							<div class="mui-media-body">
								<p class="agree">
									<span class="nickname">爱偷吃的鱼</span>
									<span class="mui-pull-right">
										<span>已添加</span>
									</span>
								</p>
								<div class="message-tip">
									<p class="mui-ellipsis">
										burtyang
									</p>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
			
			<!--群聊列表-->
			<div class="home-div-user mui-scroll-wrapper group_chat" id="group_chat">
				<div class="user-lists mui-scroll">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-media">
							<!--装成员头像的盒子，9格-->
							<div class="mui-pull-left pics9">
								<img class="" src="http://192.168.6.17:8082/images/girls1.jpg">
								<img class="" src="http://192.168.6.17:8082/images/girls2.jpg">
								<img class="" src="http://192.168.6.17:8082/images/boy1.jpg">
								<img class="" src="http://192.168.6.17:8082/images/boys.jpg">
								<img class="" src="http://192.168.6.17:8082/images/girls1.jpg">
								<img class="" src="http://192.168.6.17:8082/images/girls2.jpg">
								<img class="" src="http://192.168.6.17:8082/images/boy1.jpg">
								<img class="" src="http://192.168.6.17:8082/images/boys.jpg">
							</div>
							<div class="mui-media-body">
								<p>兄弟姐妹</p>
							</div>
						</li>
						<li class="mui-table-view-cell mui-media">
							<!--装成员头像的盒子，9格-->
							<div class="mui-pull-left pics9">
								<img class="" src="http://192.168.6.17:8082/images/girls1.jpg">
								<img class="" src="http://192.168.6.17:8082/images/girls2.jpg">
								<img class="" src="http://192.168.6.17:8082/images/boy1.jpg">
							</div>
							<div class="mui-media-body">
								<p>Have fun</p>
							</div>
						</li>
					</ul>
				</div>
			</div>
			
			<!--通讯录-->
			<div class="home-div-user mui-scroll-wrapper address_book" id="address_book">
				<div class="user-lists mui-scroll">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-media">
							<img class="mui-media-object mui-pull-left" src="http://192.168.6.17:8082/images/girls1.jpg">
							<div class="mui-media-body">
								<p>
									<span class="nickname">爱偷吃的鱼</span>
								</p>
							</div>
						</li>
						<li class="mui-table-view-cell mui-media">
							<img class="mui-media-object mui-pull-left" src="http://192.168.6.17:8082/images/girls2.jpg">
							<div class="mui-media-body">
								<p>
									<span class="nickname">我有些缺点</span>
								</p>
							</div>
						</li>
					</ul>
				</div>
			</div>
			
			
			<!--机器人-->
			<div class="home-div-user mui-scroll-wrapper robot" id="robot">
				<div class="user-lists mui-scroll">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-media">
							<img class="mui-media-object mui-pull-left" src="http://192.168.6.17:8082/images/robot.png">
							<div class="mui-media-body">
								<p>
									<span class="nickname">我是小管家</span>
									<span class="mui-pull-right">
										<span>10:21</span>
									</span>
								</p>
								<div class="message-tip">
									<p class="mui-ellipsis">
										你好，我是你的小管家
									</p>
									<span class="mui-badge mui-badge-success mui-pull-right">1</span>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
			
		</div>

    </div>
</template>

<script>

export default {
    data(){
        return {

        }
    },
    mounted(){
        var burtyang_msg = new BurtMsg();
        burtyang_msg.init();
    },
    methods:{

    }
}


//服务器地址
import {server} from '../../config/index.js';
import {routeJump} from '../util/index.js';

castapp.init();

var userInfo = localStorage.getItem('userInfo');
userInfo = userInfo? JSON.parse(userInfo): {};

function BurtMsg(){
    this.init = function(){
        this.initEvent();
    };

    //初始化事件
    this.initEvent = function(){
        //导航选择
        $('#msg-scroll-box').delegate('div.mui-control-item','tap',function(e){
            e.stopPropagation();
            var $this = $(this);
            var index = $this.index();
            //消息对应盒子显示
            $('.home-div-user').eq(index).fadeIn(1).siblings('.home-div-user').fadeOut(1);
            $this.find('span.msg-span span.msg-tip').removeClass('active')
            $this.find('span.msg-span').addClass('active')
            .parent().siblings().find('span.msg-span').removeClass('active');
        });


        //点击代理的消息列表
        $('#news').delegate('li.mui-media','click',function(e){
            e.stopPropagation();
            routeJump('/msg/chat');
            
        });

        //点击群聊的消息列表
        $('#group_chat').delegate('li.mui-media','click',function(e){
            e.stopPropagation();
            castapp.newInterface({
                url: './chat.html',
                id:'chat'
            });
        });
            
        //点击机器人小管家的消息列表
        $('#robot').delegate('li.mui-media','click',function(e){
            e.stopPropagation();
            mui.openWindow({
                url: './chat.html',
                id:'chat',
                extras: {
                    type: 'robot'  //机器人
                },
                show:{
                    autoShow:false,
                    aniShow:'zoom-fade-out',
                    duration:'350'
                },
                waiting:{
                    autoShow:true,
                    title:'加载中...',
                    options:{}
                }
            });
        });
    }
}

</script>

